<template>
    <div>
        <table class="classTimeTable" cellpadding="0" cellspacing="0">
            <tr style="background-color: #EAEBF3">
                <th>{{$t('arrangement.timesAndWeek')}}</th>
                <th>{{$t('common.week.1')}}</th>
                <th>{{$t('common.week.2')}}</th>
                <th>{{$t('common.week.3')}}</th>
                <th>{{$t('common.week.4')}}</th>
                <th>{{$t('common.week.5')}}</th>
                <th>{{$t('common.week.6')}}</th>
                <th>{{$t('common.week.7')}}</th>
            </tr>
            <tr
                v-for="(weekList, index1) in this.classTables"
                :key="index1"
                :style="{background:(index1==0||index1==1||index1==4||index1==5||index1==8||index1==9)?'#ffffff':'#F6F7FB'}"
            >
                <template v-for="(week) in weekList">
                    <td
                        :key="week.dayOfWeek"
                        :style="{'backgroundColor': week.color}"
                        :class="{ 'seletedClass': week.selected,
            'preSeletedClass':week.preSelected,
            'bgGray':week.isGray, 'disable': week.disable,
            'half':week.half,
            'both':week.both ,
            }"
                        :rowspan="week.rowspan"
                        :data-index="week.dayOfWeek"
                        v-if="!week.remove"
                        @click="OnCellClick(week)"
                    >
                        <el-popover v-if="week.campus" placement="bottom-start" trigger="hover">
                            <div class="course-info">
                                <div>
                                    <span class="label">课程代码：</span>
                                    <span class="value">{{week.courseCode}}</span>
                                </div>
                                <div>
                                    <span class="label">课程名称：</span>
                                    <span class="value">{{week.courseName}}</span>
                                </div>
                                <div>
                                    <span class="label">教师：</span>
                                    <span class="value">{{week.teacherName}}</span>
                                </div>
                                <div>
                                    <span class="label">节次：</span>
                                    <span class="value">{{week.timeStart}}-{{week.timeEnd}}</span>
                                </div>
                                <div>
                                    <span class="label">教室：</span>
                                    <span class="value">{{week.roomName}}</span>
                                </div>
                                <div>
                                    <span class="label">校区：</span>
                                    <span class="value">{{week.campusI18n}}</span>
                                </div>
                            </div>
                            <div slot="reference" class="content" :style="week.style">{{week.label}}</div>
                        </el-popover>
                        <div v-else class="content" :style="week.style">{{week.label}}</div>
                    </td>
                </template>
            </tr>
        </table>
    </div>
</template>
<script>
import UTILS from "common/src/utils/utils";

// 课程时间表组件
export default {
    name: "MyLesson",
    props: ["data", "cellClickCallback"],
    computed: {},
    mounted() {
        this.initWeekList();
    },
    watch: {
        data: {
            handler: function(newVal, oldVal) {
                this.initWeekList();
                if (newVal) {
                    this.fillTable(newVal);
                }
            }
        }
    },
    data() {
        return {
            classTables: [], //二维数组 节次->星期
            colors: [
                "#3BA0FF",
                "#36CBCB",
                "#4DCB73",
                "#F2637B",
                "#D147E9",
                "#FF6E40",
                "#BD6748",
                "#7E44E4",
                "#607D8B",
                "#FAD337"
            ]
        };
    },
    methods: {
        displayClassTimes(val) {
            let language = this.$store.getters.language;
            return language == "cn" ? "第" + val + "节课" : "Class " + val;
        },
        initWeekList() {
            this.classTables = [];
            for (let i = 1; i < 13; i++) {
                let color = "transparent";
                let cellClass;
                let disable = false;
                if (i % 2) {
                    cellClass = "half";
                }
                let weekList = [
                    {
                        dayOfWeek: 0,
                        timeClass: i,
                        color: color,
                        disable,
                        label: this.displayClassTimes(i),
                        half: cellClass === "half"
                    }
                ];
                for (let j = 1; j <= 7; j++) {
                    weekList.push({
                        dayOfWeek: j,
                        timeClass: i,
                        selected: false,
                        preSelected: false,
                        //isGray: i === 9 || i === 12,
                        //disable: i === 9 || i === 12,
                        half: cellClass === "half",
                        both: cellClass === "both"
                    });
                }
                this.classTables.push(weekList);
            }
            this.fillTable();
        },
        fillTable() {
            // 显示被其它专业占用的时间
            let otherUseTimes = this.data;
            if (otherUseTimes) {
                otherUseTimes.forEach((time, index) => {
                    for (let j = index + 1; j < otherUseTimes.length; j++) {
                        const _time = otherUseTimes[j];
                        if (
                            time.dayOfWeek == _time.dayOfWeek &&
                            (time.timeStart == _time.timeStart ||
                                time.timeEnd == _time.timeEnd)
                        ) {
                            time.value += ", " + _time.value;
                            _time.remove = true;
                        }
                    }
                });
                otherUseTimes.forEach(time => {
                    if (time.remove) {
                        return;
                    }
                    const week = this.classTables[time.timeStart - 1][
                        time.dayOfWeek
                    ];
                    week.label = time.value;
                    week.disable = true;
                    week.rowspan = time.timeEnd - time.timeStart + 1;
                    week.style = {
                        height: 26 * week.rowspan + "px",
                        background: this.colors[
                            parseInt(time.campus) % this.colors.length
                        ],
                        color: "#FFF"
                    };
                    week.campus = time.campus;
                    week.campusI18n = time.campusI18n;
                    week.courseCode = time.courseCode;
                    week.courseName = time.courseName;
                    week.teacherName = time.teacherName;
                    week.timeStart = time.timeStart;
                    week.timeEnd = time.timeEnd;
                    week.roomName = time.roomName;
                    // 之后的节次都需要合并单元格
                    for (
                        let step = time.timeStart + 1;
                        step <= time.timeEnd;
                        step++
                    ) {
                        const nextTime = this.classTables[step - 1][
                            time.dayOfWeek
                        ];
                        _.merge(nextTime, {
                            label: "",
                            disable: true,
                            remove: true
                        });
                    }
                });
            }
        },
        OnCellClick(week) {
            //console.log("cell sel:" + week.label + " " + week.dayOfWeek + "-" + week.timeClass);
            let timeData = this.data;

            for (let row = 0; row < this.classTables.length; row++) {
                for (let col = 0; col < this.classTables[row].length; col++) {
                    const week = this.classTables[row][col];
                    week.selected = false;
                }
            }

            if (timeData) {
                for (let i = 0; i < timeData.length; i++) {
                    const time = timeData[i];
                    if (
                        time.dayOfWeek == week.dayOfWeek &&
                        (time.timeStart <= week.timeClass &&
                            time.timeEnd >= week.timeClass)
                    ) {
                        week.selected = true;
                        week.timeData = time;
                        break;
                    }
                }
            }
            if (this.cellClickCallback) {
                this.cellClickCallback(week.timeData);
            }
        },
        updateCell(cellData) {
            for (let row = 0; row < this.classTables.length; row++) {
                for (let col = 0; col < this.classTables[row].length; col++) {
                    const week = this.classTables[row][col];
                    if (
                        cellData.dayOfWeek == week.dayOfWeek &&
                        (cellData.timeStart <= week.timeClass &&
                            cellData.timeEnd >= week.timeClass)
                    ) {
                        week.label = cellData.value;
                        return;
                    }
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.classTimeTable {
    table-layout: fixed;
    color: #454545;
    &.noPoint td {
        cursor: default;
        width: auto;
    }
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    font-size: 12px;
    th {
        height: 26px;
        border: solid 1px #e8e8eb;
    }
    td {
        color: #4c5c70;
        height: 26px;
        border: solid 1px #e8e8eb;
        border-top: none;
        div.content {
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 4px;
            cursor: pointer;
        }
    }
    td.both {
        border: solid 1px #e8e8eb;
    }
    td.half {
        border-bottom: dashed 1px #e8e8eb;
    }
    td.bgGray {
        background: #e0e0e0;
    }
    td.seletedClass {
        background: yellow !important;
    }
    td.seletedClass.preSeletedClass {
        background: #b7b7f9;
    }
    td.preSeletedClass {
        background: #89ffde;
    }
    td.disable {
        background: #e0e0e0;
    }
}
.course-info {
    margin: 0 10px;
    span.label {
        color: #8896a7;
        width: 70px;
        text-align: right;
        display: inline-block;
        line-height: 22px;
    }
    span.value {
        color: #4c5c70;
        line-height: 22px;
    }
}
</style>
